<template>
  <div>
    <div class="layout">
      <div class="register-container">
        <Subtitle text="抵达详情"/>
        <IntelSelect
            label="您将如何抵达*"
            v-model="form.arrivalDetailsType"
            class="register-input"
            :options="travelTypeOptions"
            @change="(val)=> {form.arrivalDetailsType = val}"
        />
        <div v-show="form.arrivalDetailsType === '飞机'">
          <IntelSelect
              label="抵达机场*"
              v-model="form.airArrivalAirport"
              class="register-input"
              :options="airportOptions"
              @change="(val)=> {form.airArrivalAirport = val}"
          />
          <IntelInput
              label="出发地*"
              v-model="form.airArrivalOrigin"
              placeholder="出发地*"
              class="register-input"
          />
          <div class="input-group">
            <IntelInput
                label="航线"
                v-model="form.airArrivalAirline"
                placeholder="航线"
                class="register-input"
            />
            <div class="divider-space"></div>
            <IntelInput
                label="航班*"
                v-model="form.airArrivalFlightNumber"
                placeholder="航班*"
                class="register-input"
            />
          </div>
          <div class="input-group">
            <IntelDatePicker
                label="抵达日期*"
                v-model="form.airArrivalDate"
                placeholder="抵达日期*"
                class="register-input"
                @change="(val)=> {form.airArrivalDate = val}"
            />
            <div class="divider-space"></div>
            <IntelTimePicker
                label="航班出发时间*"
                v-model="form.airArrivalDepartureTime"
                placeholder="航班出发时间*"
                class="register-input"
                @change="(val)=> {form.airArrivalDepartureTime = val}"
            />
          </div>
          <div class="input-group">
            <IntelTimePicker
                label="抵达时间*"
                v-model="form.airArrivalTime"
                placeholder="抵达时间*"
                class="register-input"
                @change="(val)=> {form.airArrivalTime = val}"
            />
            <div class="divider-space"></div>
            <IntelInput
                label="抵达航站楼*"
                v-model="form.airArrivalTerminal"
                placeholder="抵达航站楼*"
                class="register-input"
            />
          </div>
          <IntelInput
              label="备注"
              v-model="form.airArrivalComments"
              placeholder="备注"
              class="register-input"
          />
        </div>
        <div v-show="form.arrivalDetailsType === '火车'">
          <IntelSelect
              label="您将抵达哪个车站*"
              v-model="form.railArrivalStation"
              class="register-input"
              :options="trainStationOptions"
              @change="(val)=> {form.railArrivalStation = val}"
          />
          <IntelInput
              label="出发地*"
              v-model="form.railArrivalOrigin"
              placeholder="出发地*"
              class="register-input"
          />
          <div class="input-group">
            <IntelDatePicker
                label="抵达日期*"
                v-model="form.railArrivalDate"
                placeholder="抵达日期*"
                class="register-input"
                @change="(val)=> {form.railArrivalDate = val}"
            />
            <div class="divider-space"></div>
            <IntelTimePicker
                label="抵达时间*"
                v-model="form.railArrivalTime"
                placeholder="抵达时间*"
                class="register-input"
                @change="(val)=> {form.railArrivalTime = val}"
            />
          </div>
          <div class="input-group">
            <IntelInput
                label="列车车次*"
                v-model="form.railArrivalTrainNumber"
                placeholder="列车车次*"
                class="register-input"
            />
            <div class="divider-space"></div>
            <IntelInput
                label="铁路公司"
                v-model="form.railArrivalTrainCompany"
                placeholder="铁路公司"
                class="register-input"
            />
          </div>
          <IntelInput
              label="备注"
              v-model="form.railArrivalComments"
              placeholder="备注"
              class="register-input"
          />
        </div>
        <div v-show="form.arrivalDetailsType === '汽车'">

          <div class="input-group">
            <IntelDatePicker
                label="抵达日期*"
                v-model="form.carArrivalDate"
                placeholder="抵达日期*"
                class="register-input"
                @change="(val)=> {form.carArrivalDate = val}"
            />
            <div class="divider-space"></div>
            <IntelTimePicker
                label="抵达时间*"
                v-model="form.carArrivalTime"
                placeholder="抵达时间*"
                class="register-input"
                @change="(val)=> {form.carArrivalTime = val}"
            />
          </div>
          <IntelInput
              label="备注"
              v-model="form.carArrivalComments"
              placeholder="备注"
              class="register-input"
          />
        </div>
        <div v-show="form.arrivalDetailsType === '其它'">

          <div class="input-group">
            <IntelDatePicker
                label="抵达日期*"
                v-model="form.otherArrivalDate"
                placeholder="抵达日期*"
                class="register-input"
                @change="(val)=> {form.otherArrivalDate = val}"
            />
            <div class="divider-space"></div>
            <IntelTimePicker
                label="抵达时间*"
                v-model="form.otherArrivalTime"
                placeholder="抵达时间*"
                class="register-input"
                @change="(val)=> {form.otherArrivalTime = val}"
            />
          </div>
          <IntelInput
              label="备注"
              v-model="form.otherArrivalComments"
              placeholder="备注"
              class="register-input"
          />
        </div>
        <div style="height: 40px; width: 100%;display: block;"></div>
        <Subtitle text="出发详情"/>
        <IntelSelect
            label="您将如何离京*"
            v-model="form.departureDetailsType"
            class="register-input"
            :options="travelTypeOptions"
            @change="(val)=> {form.departureDetailsType = val}"
        />
        <div v-show="form.departureDetailsType === '飞机'">
          <IntelSelect
              label="出发机场*"
              v-model="form.airDepartureAirport"
              class="register-input"
              :options="airportOptions"
              @change="(val)=> {form.airDepartureAirport = val}"
          />
          <div class="input-group">
            <IntelDatePicker
                label="出发日期*"
                v-model="form.airDepartureDate"
                placeholder="出发日期*"
                class="register-input"
                @change="(val)=> {form.airDepartureDate = val}"
            />
            <div class="divider-space"></div>
            <IntelTimePicker
                label="出发时间*"
                v-model="form.airDepartureTime"
                placeholder="出发时间*"
                class="register-input"
                @change="(val)=> {form.airDepartureTime = val}"
            />
          </div>
          <div class="input-group">
            <IntelInput
                label="航线"
                v-model="form.airDepartureAirline"
                placeholder="航线"
                class="register-input"
            />
            <div class="divider-space"></div>
            <IntelInput
                label="航班*"
                v-model="form.airDepartureFlightNumber"
                placeholder="航班*"
                class="register-input"
            />
          </div>

          <IntelInput
              label="出发航站楼*"
              v-model="form.airDepartureTerminal"
              placeholder="出发航站楼*"
              class="register-input"
          />
          <IntelInput
              label="备注"
              v-model="form.airDepartureComments"
              placeholder="备注"
              class="register-input"
          />
        </div>
        <div v-show="form.departureDetailsType === '火车'">
          <IntelSelect
              label="您将从哪个车站出发*"
              v-model="form.railDepartureStation"
              class="register-input"
              :options="trainStationOptions"
              @change="(val)=> {form.railDepartureStation = val}"
          />
          <div class="input-group">
            <IntelDatePicker
                label="出发日期*"
                v-model="form.railDepartureDate"
                placeholder="出发日期*"
                class="register-input"
                @change="(val)=> {form.railDepartureDate = val}"
            />
            <div class="divider-space"></div>
            <IntelTimePicker
                label="出发时间*"
                v-model="form.railDepartureTime"
                placeholder="出发时间*"
                class="register-input"
                @change="(val)=> {form.railDepartureTime = val}"
            />
          </div>
          <div class="input-group">
            <IntelInput
                label="列车车次*"
                v-model="form.railDepartureTrainNumber"
                placeholder="列车车次*"
                class="register-input"
            />
            <div class="divider-space"></div>
            <IntelInput
                label="到达地点*"
                v-model="form.railDeparturePlace"
                placeholder="到达地点*"
                class="register-input"
            />
          </div>
          <IntelInput
              label="备注"
              v-model="form.railDepartureComments"
              placeholder="备注"
              class="register-input"
          />
        </div>
        <div v-show="form.departureDetailsType === '汽车'">

          <div class="input-group">
            <IntelTimePicker
                label="您预估的出发时间是*"
                v-model="form.carDepartureTime"
                placeholder="您预估的出发时间是*"
                class="register-input"
                @change="(val)=> {form.carDepartureTime = val}"
            />
            <div class="divider-space"></div>
            <IntelDatePicker
                label="出发日期*"
                v-model="form.carDepartureDate"
                placeholder="出发日期*"
                class="register-input"
                @change="(val)=> {form.carDepartureDate = val}"
            />
          </div>
          <IntelInput
              label="备注"
              v-model="form.carDepartureComments"
              placeholder="备注"
              class="register-input"
          />
        </div>
        <div v-show="form.departureDetailsType === '其它'">

          <div class="input-group">
            <IntelTimePicker
                label="您预估的出发时间是*"
                v-model="form.otherDepartureTime"
                placeholder="您预估的出发时间是*"
                class="register-input"
                @change="(val)=> {form.otherDepartureTime = val}"
            />
            <div class="divider-space"></div>
            <IntelDatePicker
                label="出发日期*"
                v-model="form.otherDepartureDate"
                placeholder="出发日期*"
                class="register-input"
                @change="(val)=> {form.otherDepartureDate = val}"
            />
          </div>
          <IntelInput
              label="备注"
              v-model="form.otherDepartureComments"
              placeholder="备注"
              class="register-input"
          />
        </div>
        <div class="primary-button" @click="handleSubmit">{{ $t('userForm.buttonSave') }}</div>
      </div>


    </div>
  </div>
</template>

<script>
import IntelInput from "../components/common/IntelInput";
import IntelSelect from "../components/common/IntelSelect";
import IntelDatePicker from "../components/common/IntelDatePicker";
import IntelTimePicker from "../components/common/IntelTimePicker";
import Subtitle from "../components/common/Subtitle";
import { getTravelAuto, updateTravel } from "../api/service";


export default {
  name: "faq",
  components: {
    IntelInput,
    IntelSelect,
    IntelDatePicker,
    IntelTimePicker,
    Subtitle
  },
  data: function () {
    return {
      travelTypeOptions: ['飞机','火车','汽车','其它'],
      airportOptions: ['首都国际机场','大兴机场'],
      trainStationOptions: ['北京站', '北京西站', '北京南站', '北京北站', '北京朝阳站', '北京大兴站'],
      form: {
        arrivalDetailsType: '飞机',
        airArrivalAirport: '抵达机场*',
        departureDetailsType: '飞机',
        airDepartureAirport: '出发机场*'
      }
    }
  },
  mounted() {
    if (localStorage.travel) {
      const info = JSON.parse(localStorage.travel)
      this.form = info
      this.form.arrivalDetailsType =  info.arrivalDetailsType || '飞机',
        this.form.departureDetailsType =  info.departureDetailsType || '飞机',
        this.form.airArrivalAirport = info.airArrivalAirport || '抵达机场*',
        this.form.airDepartureAirport = info.airDepartureAirport || '出发机场*',
        this.form.railArrivalStation = info.railArrivalStation || '您将抵达哪个车站*',
        this.form.railDepartureStation = info.railDepartureStation || '您将从哪个车站出发*'
    }
  },
  methods: {
    handleReturn() {
      this.$router.push({
        path: this.$i18n.path('generalInfo')
      })
    },

    handleSubmit() {
      const that = this
      const param = this.form
      // 删除多余字段
      delete param.gmtCreate
      delete param.gmtModified
      delete param.operateIp
      delete param.operatorId
      delete param.operatorName
      param.scheduleUserId = JSON.parse(localStorage.overnight_userInfo).id
      updateTravel(param).then(res => {
        console.log(res)
        if (res.code === 200) {
          that.next()
        } else {
          const msg = res.message.split('$$')[0]
          this.alertShow = true
          this.alertContent = msg
        }
      })
    },
    next () {
      this.$router.push({
        path: this.$i18n.path('userInfo')
      })
    }
  }
}
</script>
<style>
.ant-input, .ant-time-picker-input {
  border-width: 0 !important;
}
</style>
<style scoped>
.register-container {
  width: 800px;
  padding-top: 60px;
  padding-left: 120px;
  padding-bottom: 120px;
}

.create-text {
  padding-top: 0px;
}

.create-text .title {
  font-weight: bold;
  font-size: 20px;
  color: #0068B5;
  padding-bottom: 18px;
}

.create-text .desc {
  font-size: 14px;
  color: #999999;
}

.create-text .desc a {
  color: #0068B5;
  text-decoration: none;
}

.form {
  padding-top: 24px;
}

.register-input, .check-group {
  margin-top: 16px;
  width: 100%;
}

.input-group {
  width: 100%;
  display: flex;
}

.divider-space {
  width: 32px;
  height: 30px;
  display: inline-block;
}



.primary-button {
  width: 146px;
  height: 36px;
  color: white;
  font-size: 14px;
  text-align: center;
  line-height: 36px;
  background: #0068B5;
  cursor: pointer;
  margin-top: 16px;
}
.ghost-button {
  width: 146px;
  height: 36px;
  color: #0068B5;
  font-size: 14px;
  text-align: center;
  line-height: 36px;
  border: 1px solid #0068B5;
  cursor: pointer;
  margin-top: 16px;
}

.password-prompt {
  padding-top: 10px;
}

.text-green {
  color: green;
  text-decoration: underline;
}

.check-group {
  font-size: 14px;
  color: #333333;
}

.check-group > textarea {
  width: 100%;
  border: 1px solid #D7D7D7;
  border-radius: 0;
  padding: 12px;
  margin-top: 16px;
}
.check-group > textarea::placeholder {
  color: #333333;
}
.check-button input {
  cursor: pointer;
}
</style>
